<template>
	<div class="rb-page">
		<div class="polify">
			<div class="polify_input">
				<input class="uni-input" focus placeholder="请输入政策关键词进行搜索" v-model="srearchText" />
				<div class="uni-seach" @click="handleClickSearch"></div>
			</div>
			<div class="rbpr_group">
				<div class="rbprg_left" v-visibility="audioImage"></div>
				<div class="rbprg_middle" @click="handleStartAudio"></div>
				<div class="rbprg_right" v-visibility="audioImage"></div>
			</div>
		</div>
		<div class="pr_tab">
			<div class="pr_head">
				<div v-for="(item) in category" 
						:key="item.id"
						:class="{'prh_list': true, 'prh_active': active === item.id}"
						@click="handleClickCategory(item.id)"
				>{{ item.name }}</div>
			</div>
			<el-scrollbar class="pr_content">
				<div class="prc_list" v-for="item in list" :key="item.id" @click="handleClickPolifyItem(item)">
					<div class="prcl_item">{{ item.title }}</div>
					<div class="prcl_date">{{ item.createTime }}</div>
				</div>
			</el-scrollbar>
			<el-pagination layout="prev, pager, next" :total="total" :page-size="limit" prev-text="上一页" next-text="下一页" v-model:current-page="page" @current-change="getList" />
		</div>
	</div>
</template>

<script setup>
import { ref, computed, inject, defineProps, onActivated } from 'vue'
import { useStore } from 'vuex'
import { policyInfoPage } from '@/apis/index'

const props = defineProps({
	setComponent:{
		type: Function,
		required: true
	},
	setCurrentPolicyDetail:{
		type: Function,
		required: true
	}
})

const screenFn = inject('screenFn')

const store = useStore()

// 搜索内容
const srearchText = ref('')
// 点击搜索
const handleClickSearch = () => {
	active.value = 0
	getList()
}

// 分类
const category = computed(() => {
	return store.state.policyType
})

const active = ref(0)
const handleClickCategory = (id) => {
	active.value = id
	srearchText.value = ''
	getList()
}

// 当前页数
const page = ref(1)
// 一页显示几条
const limit = 5
// 总数
const total = ref(0)

const list = ref([])

onActivated(() => {
	getList()
	// 获取语音的回调
	window.getAudioMessage = getAudioMessage
	window.activeAudio = activeAudio
})

const getList = () => {
	screenFn()
	const params = {
		page: page.value,
		limit,
		title: srearchText.value
	}
	if(active.value !== 0){
		params.typeId = active.value
	}
	policyInfoPage(params).then(res => {
		list.value = res.data
		total.value = res.meta.pagination.total
	})
}

// 点击政策项
const handleClickPolifyItem = (info) => {
	props.setCurrentPolicyDetail(info)
	props.setComponent('PolicyDetails')
}

// 音频音浪图片是否显示
const audioImage = ref(false)
// 自定义指令
const vVisibility = {
	mounted(el, binding){
		if(binding.value){
			el.style.visibility = 'visible'
		}else{
			el.style.visibility = 'hidden'
		}
	},
	updated(el, binding){
		if(binding.value){
			el.style.visibility = 'visible'
		}else{
			el.style.visibility = 'hidden'
		}
	}
}

// 音频延时器id，如果开启音频 5 秒后，安卓端没有触发回调，则自动结束音频
let AudioTimer = null
// 本次手动唤起语音所说的话
let audioMessage = ''
// 点击音频-开始
const handleStartAudio = () => {
	screenFn()
	audioImage.value = true
	audioMessage = ''
	AudioTimer = window.setTimeout(() => {
		handleEndAudio()
	}, 5000)
	// window.android.getCallback(true)
}

// 音频结束
const handleEndAudio = () => {
	audioImage.value = false
	audioMessage = ''
	AudioTimer = null
	// window.android.stopTTS()
}

// 音频回调延时器id
let AudioMessageTimer = null

// 音频回调
const getAudioMessage = (e) => {
	audioImage.value = true
	window.clearTimeout(AudioTimer)
	if(AudioMessageTimer){
		window.clearTimeout(AudioMessageTimer)
	}
	audioMessage = audioMessage + e
	AudioMessageTimer = setTimeout(() => {
		srearchText.value = audioMessage
		getList()
		handleEndAudio()
	}, 2000)
}

// 主动唤起财小智时的回调
const activeAudio = () => {
  audioImage.value = true
}
</script>

<style scoped lang="less">
.rb-page{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.polify {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	column-gap: 3%;
	margin-bottom: .4167rem ;
	.polify_input {
		flex: 1;
		background-image: url('@/assets/image/search.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		padding: 0 .1094rem 0 .2135rem;
		display: flex;
		align-items: center;
		border-radius: .2604rem;
    overflow: hidden;

		.uni-input {
			flex: 1;
			height: 100%;
			font-size: .1354rem;
			font-family: 'AlibabaPuHuiTi';
			color: #000;
		}
		.uni-seach {
			width: .3802rem;
			height: .3802rem;
			background-image: url('@/assets/image/searchBtn.png');
			background-size: 100% 100%;
			background-repeat: no-repeat;
			cursor: pointer;
		}
	}
	.rbpr_group {
			display: flex;
			align-items: center;
			gap: .0781rem;
			.rbprg_left,
			.rbprg_right {
				width: .4583rem;
				height: .224rem;
				background-image: url('@/assets/image/talking.webp');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.rbprg_middle {
				width: .5729rem;
				height: .5729rem;
				background-image: url('@/assets/image/microphone.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		}
}
.pr_tab {
  flex: 1;
	width: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.pr_head {
		display: flex;
		color: #fff;
		justify-content: space-around;
		font-size: .1875rem;
		margin-bottom: .2083rem;
		.prh_list {
			padding: .0417rem .1563rem;
			&.prh_active {
				background: #2274f1;
				box-shadow: 2px 0px 3px 0px #1562ad;
				border-radius: .1563rem;
			}
		}
	}

	.pr_content {
		display: flex;
		flex-direction: column;
		gap: .1302rem;
		flex: 1;
		margin-bottom: .2604rem;
		.prc_list {
			display: flex;
			justify-content: space-between;
			font-size: .1354rem;
			font-family: 'AlibabaPuHuiTi';
			line-height: .3125rem;
			.prcl_item {
				width: 3.7292rem;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
	.el-pagination{
		align-self: flex-end;
		/deep/.btn-prev{
			margin-right: .1042rem;
			border-radius: .0521rem;
			font-family: 'AlibabaPuHuiTi';
			font-size: .1563rem;
			height: .3229rem;
			line-height: .3229rem;
			padding: 0 .1042rem;
			background: linear-gradient(to bottom, #F3F7FF 0%, #cbdffd 100%);
			min-width: unset;
		}
		/deep/.el-pager{
			.number,.more{
				margin-right: .1042rem;
				border-radius: .0521rem;
				width: .3229rem;
				height: .3229rem;
				line-height: .3229rem;
				font-family: 'AlibabaPuHuiTi';
				font-size: .1563rem;
				background: linear-gradient(to bottom, #F3F7FF 0%, #cbdffd 100%);
				min-width: unset;
			}
		}
		/deep/.btn-next{
			margin-right: .1042rem;
			border-radius: .0521rem;
			font-family: 'AlibabaPuHuiTi';
			font-size: .1563rem;
			height: .3229rem;
			line-height: .3229rem;
			padding: 0 .1042rem;
			background: linear-gradient(to bottom, #F3F7FF 0%, #cbdffd 100%);
			min-width: unset;
		}
	}
}
</style>
